<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div style="min-height: 50px;background:#f7f7f7;line-height:50px;padding:0px 20px;color:#12bdce">
                    {{ $t("message.new_change") }}
                </div>
            </el-col>
        </el-row>
        <div style="padding-top:10px;padding:15px 0 30px 30px;">
            <el-card v-loading.body="loading">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="标题" prop="title">
                                <el-input v-model="ruleForm.title"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="关键字" prop="keywords">
                                <el-input v-model="ruleForm.keywords"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="新闻描述">
                                <el-input type="textarea" v-model="ruleForm.description"
                                          :autosize="{ minRows: 2, maxRows: 4}"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="图片">
                                <img :src="ruleForm.img">
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="新闻内容">
                                <el-input type="textarea" v-model="ruleForm.message"
                                          :autosize="{ minRows: 4, maxRows: 8}"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="新闻来源">
                                <a :href="ruleForm.url">{{ruleForm.url}}</a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="日期" required>
                                <el-form-item>
                                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.time"
                                                    style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmit">确认修改</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {},
                rules: {
                    title: [
                        {required: true, message: '请输入标题 ', trigger: 'blur'},
                    ],
                    keywords: [
                        {required: true, message: '请输入关键字', trigger: 'blur'}
                    ]
                },
                loading: true,//正在加载
            }
        },
        methods: {
            handleReset() {
                this.$refs.ruleForm.resetFields();
            },
            handleSubmit(ev) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        window.router.go(-1);
                    } else {
                        return false;
                    }
                });
            },
            loadNewDetail() {//加载新闻详情
                var id = this.$route.params.id;
                this.loading = true;
                this.$http.get('http://apis.baidu.com/tngou/info/show?id=' + id).then((response) => {
                    var data = response.data;
                    if (!data.status) {
                        this.$notify.error({
                            title: '错误',
                            message: '加载新闻详情错误'
                        });
                        this.loading = false;
                        return;
                    }
                    data.img = "http://tnfs.tngou.net/image" + data.img + "_100x100";
                    this.ruleForm = data;
                    this.loading = false;
                }, (response) => {
                    this.loading = false;
                    this.$notify.error({
                        title: '错误',
                        message: '加载新闻详情错误'
                    });
                });
            }
        },
        created() {
            this.loadNewDetail();
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route': 'loadNewList'
        },
    }
</script>